<template>
  <div>
    <div class="div">
      <div class="title"><span>咨询管理 </span> 社区知识等相关文章信的编辑发布</div>
      <el-card class="elcard">
        <el-tabs>
          <!-- 按钮 -->
          <el-button
            size="small"
            type="primary"
            class="addbtn"
            @click="addlistcate"
          >新增通知</el-button>
          <!-- 表格 -->
          <el-table :data="catelistL">
            <el-table-column label="ID" width="50" type="index" />
            <el-table-column label="分类名" prop="catename" />
            <el-table-column label="操作">
              <template #default="{row}">
                <el-button type="text" @click="putlist(row.id)">编辑</el-button>
                <el-button type="text" @click="DeleteList(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tabs>
      </el-card>
      <el-pagination
        :current-page="current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <CateList ref="catelist" :show-dialog.sync="showDialog" />
  </div>
</template>
<script>
import CateList from '@/views/content/catelist/index.vue'
import { CateListAPI, DeleteListAPI } from '@/api/cate'
export default {
  name: '',
  components: {
    CateList
  },
  data() {
    return {
      catelistL: [],
      pageSize: 10,
      current: 1,
      showDialog: false,
      total: 0,
      rules: {
        catename: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.CateList()
  },
  methods: {
    /**
     * 获取页面数据
     */
    async CateList() {
      const { data } = await CateListAPI({
        pageSize: this.pageSize,
        current: this.current
      })
      // console.log(data)
      this.catelistL = data.rows
      this.total = data.count
    },
    /**
     * 删除列表
     */
    DeleteList(id) {
      // console.log(id)
      this.$confirm('确认删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        await DeleteListAPI(id)
        this.$message.success('删除成功')
        this.CateList()
      }).catch()
    },
    /**
     * 编辑回显传输id
     */
    putlist(id) {
      this.showDialog = true
      this.$refs.catelist.putcatelist(id)
    },
    /**
     * 添加显示
     */
    addlistcate() {
      this.showDialog = true
    },
    /**
     * 每页数量发生改变时触发
     */
    handleSizeChange(val) {
      this.pageSize = val
      this.current = 1
      this.CateList()
    },
    handleCurrentChange(val) {
      this.current = val
      this.CateList()
    }
  }
}
</script>
<style lang="scss" scoped>
.div{
  margin-top: 50px;
  margin-left: 70px;
  margin-right: 70px;
  .title{
    margin-bottom: 10px;
   span{
    font-weight: 700;
  }
  }
}
.elcard{
  margin-top: 20px;
  .addbtn{
    margin-bottom: 10px;
  float: right;
   margin-right: 50px;
  }
  .img{
    width: 80px;
    height: 80px;
  }
  .el-dialog{
    .btn{
      margin-left: 200px;
    }
  }
}
</style>
